<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { projectDetail } from '@/api/project/project'
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const showAddModal = () => {
  showModal(`新增模板`);
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑开票类目`);
};
const detail = ref<any>()
const showViewModal = (record: Recordable) => {
  showModal(`灵工详情`);
  nextTick(() => {
    projectDetail(record.id).then(res => {
      detail.value = res?.data;
    })
  });
}


onBeforeMount(() => {
  
});
defineExpose({ showAddModal,showEditModal,showViewModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="800"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <el-form style="width:500px;margin:0 auto">
        <el-form-item label="项目类型">
          <div>
            {{detail?.typeDisplay}}
          </div>
        </el-form-item>
        <el-form-item label="项目时间">
          <div>
            {{detail?.startTime}} - {{detail?.endTime}}
          </div>
        </el-form-item>        
        <el-form-item label="项目名称">
          <div>
            {{detail?.projectNameCurrent}}
          </div>
        </el-form-item>
        <el-form-item label="项目内容">
          <div>
            {{detail?.projectContent}}
          </div>
        </el-form-item>
        <el-form-item label="费用规则">
          <div>
            {{detail?.projectSettlementRules}}
          </div>
        </el-form-item>
        <el-form-item label="项目地点">
          <div>
            {{detail?.projectLocation}}
          </div>
        </el-form-item>
        <el-form-item label="联系人">
          <div>
            {{detail?.contactName}}
          </div>
        </el-form-item>
        <el-form-item label="联系方式">
          <div>
            {{detail?.contactMobile}}
          </div>
        </el-form-item>
        <el-form-item label="承揽服务公司">
          <div>
            {{detail?.taxSourcesIdDisplay}}
          </div>
        </el-form-item>
        <el-form-item label="创建时间">
          <div>
            {{detail?.createTime}}
          </div>
        </el-form-item>
        <!-- <el-form-item label="结束时间">
          <div>
            {{detail?.endTime}}
          </div>
        </el-form-item> -->
        <el-form-item label="项目附件">
          <div>
            {{detail?.uploadOtherFiles[0].fileName}}
          </div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <!-- <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      /> -->
    </template>
  </vxe-modal>
</template>
<style>
.img_one{
  position: relative;
}
.icon-check{
  position: absolute;
  width: 100%;height: 100%;
  left: 0;
  top: 0;
  line-height: 48px;
  text-align: center;
}



.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
.el-form-item__content{
  color: #000;
  font-size:18px;
}
</style>